<template>
<!-- 列表形式 -->
    <div>
      <div class="news_recommend">
        <flexbox :gutter="0" wrap="wrap">
          <flexbox-item :span="1/2" v-for="(item , i) in shoplistData" :key="i" @click.native="goGoodsDetail(item.goodsid)">
            <div class="newGoods">
              <div class="new_photos"><img :src="item.src==undefined?'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2242409787,828489772&fm=58':item.src" alt=""></div>
              <div class="newTitles">{{item.title}}{{item.desc}}{{item.desc}}{{item.desc}}</div>
              <div class="newInfo">库存：{{item.kucun}} &nbsp;销量：{{item.sellcount}}</div>
              <div class="newPrices">￥{{item.shop_price}} <span>{{item.rebate}}</span></div>  
              <div class="huadiaoPrice"> ￥{{item.market_price}}</div> 
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
</template>

<script>
import { Panel,Flexbox, FlexboxItem } from "vux";

export default {
  components: {
    Panel,
    Flexbox, FlexboxItem
  },
  props: ["shoplistData"],
  methods: {
      goGoodsDetail(goodsId){
          console.log(goodsId);
      this.$router.push({
        name: 'goods_detail',
        params: {
          goodsId: goodsId
        }
      })
      }
  },
  data() {
    return {
      type: "1"
    };
  },
  computed: {}
};
</script>
<style lang="less">
.newGoods{
    background: #ffffff;
    border-radius: 5px;
    padding: 8px;
    // height: 300px;
    margin:0.25rem 0.25rem; 
}
.news_recommend {
  // width: 100%;
  margin:0 0.25rem;
}
.new_photos img {
  width: 100%;
  // height: 190px;
}
.good_tip {
  text-align: center;
  line-height: 35px;
  color: #ed393d;
}
.newTitles,
.newInfo,
.newPrices {
  text-align: left;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* font-size: 12px; */
  padding-left: 1rem;
  line-height: 21px;
}
.newInfo {
  color: #999999;
}
.newTitles {
  font-size: 13px;
}
.newPrices {
  color: #ed393d;
}
.newPrices span{
     display: inline-block;
    background: #ed393d;
    margin: 1px;
    border-radius: 10px;
    padding:0px 0.5rem; 
    font-size: 8px;
    color: #ffffff
}
.huadiaoPrice{
  color: #cccccc;
  padding-left: 15px;
  text-decoration: line-through;
  font-size: 10px
}
</style>
